<template>
  <div id="personal">
    <div class="top_bar">
      <top-bar :title="title" v-show="IsTopbar">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="personal_list">
      <md-field>
        <md-field-item name title="头像" align="right" arrow="arrow-right" @click="editPhoto">
          <img :src="userPoto" class="personalpoto" v-if="userPoto" />
          <img src="@/assets/imgs/dt_cktx_big.png" class="personalpoto" v-else />
        </md-field-item>
        <md-field-item name title="呢称" :value="userName" align="right"></md-field-item>
        <md-field-item name title="手机号" :value="getPhoneStort" align="right"></md-field-item>
      </md-field>
    </div>
    <md-popup id="popup-container" v-model="editPhotoValue" position="bottom">
      <md-popup-title-bar title="修改头像" ok-text cancel-text="取消" @cancel="editPhotoCancel"></md-popup-title-bar>
      <div class="edit_photo_box">
        <ul>
          <li
            v-for="(item, index) in photoArr"
            :key="index"
            @click="getEditPhoto(item.url)"
            :class="{active:photoActive == item.url}"
          >
            <img :src="item.url" />
            <span v-show="photoActive==item.url">
              <img src="@/assets/imgs/zhengquequeding_icon.png" />
            </span>
          </li>
        </ul>
      </div>
    </md-popup>
  </div>
</template>
<script>
import '@/assets/svgs/qrcode.svg';
import { Icon, Field, FieldItem, Toast, Dialog, Selector, Popup, PopupTitleBar } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import Utils from '@/common/pakjUtils';
import OSS from 'ali-oss';
let client = new OSS({
  region: 'oss-cn-qingdao',
  accessKeyId: 'LTAI0oUoBK7GwQn4',
  accessKeySecret: 'gHqAlhq2pX57Jz8XCO0zMLsKlZoAlX',
  bucket: 'pakj'
});
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [FieldItem.name]: FieldItem,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Selector.name]: Selector
  },
  data() {
    return {
      title: '编辑个人资料',
      userName: '',
      IsTopbar: true,
      userPhone: '',
      userPoto: '',
      editPhotoValue: false,
      photoArr: [],
      photoActive: ''
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
    Loading.show();
    http.post('/pakj/hitchUser/getHitchUser', {}).then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        this.userName = res.data.data.nickName;
        this.userPoto = res.data.data.userHitchPhoto;
        this.userPhone = decryptByDESModeEBC(res.data.data.userPhone);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    editPhotoCancel() {
      this.editPhotoValue = false;
    },
    // 修改头像
    async editPhoto() {
      Loading.show();
      try {
        let result = await fetch('https://img.padj.group/hitchavatars/avatars.json');
        this.photoArr = await result.json();
      } catch (error) {
        Loading.hide();
        console.log(error);
        Dialog.alert({
          title: '错误',
          message: '无法连接到服务器'
        });
        return;
      }
      Loading.hide();
      this.editPhotoValue = true;
    },
    getEditPhoto(url) {
      this.photoActive = url;
      let parm = {
        userHitchPhoto: url,
        type: this.$route.query.type
      };
      Loading.show();
      http.post('/pakj/hitchUser/saveHitchUserPhoto', parm).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          this.userPoto = url;
          this.editPhotoValue = false;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  computed: {
    getPhoneStort() {
      let str = this.userPhone;
      if (!str) {
        return '';
      }
      return str.substr(0, 3) + '****' + str.substr(7);
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#personal {
  height: 100vh;
  background-color: color-primary-background;
}

.personal_list {
  margin-top: 20px;
}

.personalCode {
  margin-top: 20px;
}

.personalpoto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.edit_photo_box {
  height: 25vh;
  background-color: #fff;
  padding: 0px 80px;
}

.edit_photo_box ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.edit_photo_box ul li {
  margin-top: 40px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.edit_photo_box ul li.active {
  border: solid 1px #FF6917;
}

.edit_photo_box ul li>img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.edit_photo_box ul li span {
  position: absolute;
  bottom: -10px;
  left: 60px;
}

.edit_photo_box ul li span img {
  width: 24px;
  height: 24px;
}
</style>
